<template>
  <div class="pageOut">
    <div class="pageIn" :element-loading-background="color">
      <el-select v-model="org_id" value-key="id" clearable filterable placeholder="请选择发送场馆">
        <el-option v-for="(item,index) in org" :key="index" :label="item.org_name" :value="item.id"></el-option>
      </el-select>

      <el-popover placement="top-start" title="提示" width="200" trigger="hover" content="请按照顺序来导入">
        <el-button slot="reference" style="margin-top: 12px;margin-left:60px;" @click="previous">上一步</el-button>
      </el-popover>

      <el-popover placement="top-start" title="提示" width="200" trigger="hover" content="请按照顺序来导入">
        <el-button slot="reference" style="margin-top: 12px;margin-left:60px;" @click="next">下一步</el-button>
      </el-popover>

      <el-steps :active="active" finish-status="success" simple style="margin-top: 20px">
        <el-step title="员工管理"></el-step>
        <el-step title="会员管理"></el-step>
        <el-step title="会员卡种管理"></el-step>
        <el-step title="会员卡管理"></el-step>
        <el-step title="私教课管理"></el-step>
        <el-step title="会员私教管理"></el-step>
      </el-steps>

      <!-- 员工管理 -->
      <div v-if="active==0" class="boxPlan">
        <el-button
          @click="exportmember('exportEmployee','员工模板')"
          style="margin-left: 15px;margin-bottom: 15px;"
          size="small"
        >导出员工模板</el-button>
        <div style="border-radius: 4px;">
          <el-button
            icon="el-icon-document-copy"
            type="primary"
            size="small"
            style="margin-left: 15px;"
            @click="checkFile"
          >导入员工信息</el-button>
          <span>{{fileName}}</span>
          <input
            type="file"
            id="fileinput"
            ref="referenceUpload"
            style="display: none;"
            accept=".csv"
            @change="checkFileSure($event,'/Importdata/imporgEmployee')"
          />
        </div>
      </div>
      <!-- 会员管理 -->
      <div v-if="active==1" class="boxPlan">
        <div style="margin-left:20px;margin-bottom:20px;">
          <el-radio v-model="otastrgId" label="1">潜在会员</el-radio>
          <el-radio v-model="otastrgId" label="0">有效会员</el-radio>
        </div>

        <el-button
          @click="exportmember('exportMember','会员模板')"
          style="margin-left: 15px;margin-bottom: 15px;"
          size="small"
        >导出会员模板</el-button>
        <div style="border-radius: 4px;">
          <el-button
            icon="el-icon-document-copy"
            type="primary"
            size="small"
            style="margin-left: 15px;"
            @click="checkFile"
          >导入会员信息</el-button>
          <span>{{fileName}}</span>
          <input
            type="file"
            id="fileinput"
            ref="referenceUpload"
            style="display: none;"
            accept=".csv"
            @change="checkFileSure($event,'/Importdata/importMember')"
          />
        </div>
      </div>

      <!-- 会员卡卡种管理 -->
      <div v-if="active==2" class="boxPlan">
        <el-button
          @click="exportmember('exportCardKind','会员卡卡种模板')"
          style="margin-left: 15px;margin-bottom: 15px;"
          size="small"
        >导出会员卡卡种模板</el-button>
        <div style="border-radius: 4px;">
          <el-button
            icon="el-icon-document-copy"
            type="primary"
            size="small"
            style="margin-left: 15px;"
            @click="checkFile"
          >导入会员卡卡种信息</el-button>
          <span>{{fileName}}</span>
          <input
            type="file"
            id="fileinput"
            ref="referenceUpload"
            style="display: none;"
            accept=".csv"
            @change="checkFileSure($event,'/Importdata/importCardKind')"
          />
        </div>
      </div>

      <!-- 会员卡管理 -->
      <div v-if="active==3" class="boxPlan">
        <el-button
          @click="exportmember('exportMemberCard','会员卡模板')"
          style="margin-left: 15px;margin-bottom: 15px;"
          size="small"
        >导出会员卡模板</el-button>
        <div style="border-radius: 4px;">
          <el-button
            icon="el-icon-document-copy"
            type="primary"
            size="small"
            style="margin-left: 15px;"
            @click="checkFile"
          >导入会员卡信息</el-button>
          <span>{{fileName}}</span>
          <input
            type="file"
            id="fileinput"
            ref="referenceUpload"
            style="display: none;"
            accept=".csv"
            @change="checkFileSure($event,'/Importdata/importMemberCard')"
          />
        </div>
      </div>

      <!-- 私教课管理 -->
      <div v-if="active==4" class="boxPlan">
        <el-button
          @click="exportmember('exportLesson','私教课模板')"
          style="margin-left: 15px;margin-bottom: 15px;"
          size="small"
        >导出私教课模板</el-button>
        <div style="border-radius: 4px;">
          <el-button
            icon="el-icon-document-copy"
            type="primary"
            size="small"
            style="margin-left: 15px;"
            @click="checkFile"
          >导入私教课信息</el-button>
          <span>{{fileName}}</span>
          <input
            type="file"
            id="fileinput"
            ref="referenceUpload"
            style="display: none;"
            accept=".csv"
            @change="checkFileSure($event,'/Importdata/importLesson')"
          />
        </div>
      </div>

      <!-- 会员私教管理 -->
      <div v-if="active==5" class="boxPlan">
        <el-button
          @click="exportmember('exportMemberLesson','会员私教课模板')"
          style="margin-left: 15px;margin-bottom: 15px;"
          size="small"
        >导出会员私教课模板</el-button>
        <div style="border-radius: 4px;">
          <el-button
            icon="el-icon-document-copy"
            type="primary"
            size="small"
            style="margin-left: 15px;"
            @click="checkFile"
          >导入会员私教信息</el-button>
          <span>{{fileName}}</span>
          <input
            type="file"
            id="fileinput"
            ref="referenceUpload"
            style="display: none;"
            accept=".csv"
            @change="checkFileSure($event,'/Importdata/importMemberLesson')"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  Cao,
  getOrg,
  exportStaff,
  exportMember,
  exportCardKind,
  exportMemberCard,
  exportLesson,
  exportMemmberLesson,
  importEmployee,
  importMember,
  importCardKind,
  importMemberCard,
  importMemberLesson,
  importLesson
} from "../utils/api";
import { Excel } from "../utils/common";

export default {
  data() {
    return {
      active: 0,
      color: "rgba(255, 255, 255, 0.5)",
      activeName: "first",
      fileName: "",
      org: [], //场馆
      org_id: "", //选择的场馆
      otastrgId: "1" //是否潜客 1-是 0-否
    };
  },
  created() {
    this.getOrg();
  },
  mounted() {},
  methods: {
    // 获取场馆
    getOrg() {
      let params = {};
      this.postRequest(getOrg, params, Cao).then(res => {
        this.org = res.data;
      });
    },
    next() {
      if (this.active++ > 4) this.active = 0;
      this.fileName = "";
    },
    previous() {
      if (this.active-- < 1) this.active = 0;
      this.fileName = "";
    },
    exportmember(url, name) {
      let params = {};
      let src = "/Importdata/" + url;
      Excel(src, params, name, "POST");
    },
    checkFile() {
      if (this.org_id === "") {
        this.$message({
          showClose: true,
          message: "请先选择场馆",
          type: "warning"
        });
      } else {
        document.querySelector("#fileinput").click();
      }
    },
    checkFileSure(e, url) {
      const files = e.target.files[0];
      this.handleChangePhotos(files, url);
      this.fileName = document.querySelector("#fileinput").files[0].name;
    },
    //base64转成文件后上传
    handleChangePhotos(file, url) {
      const formData = new FormData();
      if (this.active == 1) {
        formData.append("otastrgId", this.otastrgId);
      }
      formData.append("orgId", this.org_id);
      formData.append("file", file);
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });

      this.postRequest(url, formData, "cao", {
        "Content-Type": "multipart/form-data"
      })
        .then(res => {
          this.fileName = "";
          if (res.code == 200) {
            this.$notify({
              title: "成功",
              message: res.msg,
              type: "success"
            });
          }
          loading.close();
          this.$refs.referenceUpload.value = null;
        })
        .catch(err => {});
    }
  }
};
</script>

<style scoped>
.boxPlan {
  margin-top: 20px;
}
.a-upload {
  position: relative;
  top: 12px;
  display: inline-block;
  background: #7a89bc;
  /* border: 1px solid #99D3F5; */
  border-radius: 4px;
  padding: 6px 18px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  text-indent: 0;
  line-height: 20px;
  font-size: 12px;
}
.a-upload input {
  position: absolute;

  /* top:30px; */
  right: 0;
  top: 0;
  opacity: 0;
}
.a-upload:hover {
  background: #aadffd;
  border-color: #78c3f3;
  color: #004974;
  text-decoration: none;
}
</style>
